<template>
  <div class="form">
    <div class="form-item">
      <div class="label">科目：</div>
      <div class="input">
        <!--  v-model双向绑定subject和score  
        使用v-model的时候data中必须有这个数据。
        .trim  .number-->
        <input type="text" placeholder="请输入科目" v-model.trim="subject" />
      </div>
    </div>
    <div class="form-item">
      <div class="label">分数：</div>
      <div class="input">
        <input type="text" placeholder="请输入分数" v-model.number="score" />
      </div>
    </div>
    <div class="form-item">
      <div class="label"></div>
      <div class="input">
        <!-- 添加 -->
        <button class="submit" @click="addFn">
          添加
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
 data(){
  return{
    //参数改成A B也可
    subject:'',
    score:''
  }
 },
 methods:{
  //添加 判断
  addFn(){
    if(this.score>=0 &&this.score<=100 &&this.subject){
      this.$emit('add',this.subject,this.score)
    }else{
      alert('请输入正确数据')
    }
    this.subject='',
    this.score=''
  }
 }
}
</script>

<style></style>
